<template>
    <a-card :bordered="false">
        <a-space :size="54">
            <section>
                <a-upload
                    :file-list="avatarList"
                    accept="image/*"
                    :show-file-list="false"
                    list-type="picture-card"
                    :show-upload-button="true"
                    :on-before-upload="onBeforeUpload"
                >
                    <template #upload-button>
                        <a-avatar :size="100">
                            <template #trigger-icon><icon-camera /></template>
                            <img v-if="avatarList.length" :src="avatarList[0].url" alt="avatar" />
                        </a-avatar>
                    </template>
                </a-upload>
            </section>
            <a-descriptions
                :data="renderData"
                :column="2"
                align="right"
                layout="inline-horizontal"
                :label-style="{
          width: '140px',
          fontWeight: 'normal',
          color: 'rgb(var(--gray-8))',
        }"
                :value-style="{
          width: '200px',
          paddingLeft: '8px',
          textAlign: 'left',
        }"
            >
                <template #label="{ label }">{{ label }} :</template>
            </a-descriptions>
        </a-space>
    </a-card>
    <a-modal v-model:visible="visible" title="上传头像" :width="width >= 400 ? 400 : '100%'" :footer="false" draggable @close="reset">
        <a-row>
            <a-col :span="14" style="width: 200px; height: 200px">
                <VueCropper
                    ref="cropperRef"
                    :img="options.img"
                    :info="true"
                    :auto-crop="options.autoCrop"
                    :auto-crop-width="options.autoCropWidth"
                    :auto-crop-height="options.autoCropHeight"
                    :fixed-box="options.fixedBox"
                    :fixed="options.fixed"
                    :full="options.full"
                    :center-box="options.centerBox"
                    :can-move="options.canMove"
                    :output-type="options.outputType"
                    :output-size="options.outputSize"
                    @real-time="handleRealTime"
                />
            </a-col>
            <a-col :span="10" style="display: flex; justify-content: center">
                <div :style="previewStyle">
                    <div :style="previews.div">
                        <img :src="previews.url" :style="previews.img" alt="" />
                    </div>
                </div>
            </a-col>
        </a-row>
        <div style="text-align: center; padding-top: 30px">
            <a-space>
                <a-button type="primary" @click="handleUpload">确定</a-button>
                <a-button @click="reset">取消</a-button>
            </a-space>
        </div>
    </a-modal>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {useUserStore} from '@/stores'
import { type FileItem, Message } from '@arco-design/web-vue'
import { VueCropper } from 'vue-cropper'
import 'vue-cropper/dist/index.css'
const { width } = useWindowSize();
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
import {type EnterpriseDto, getEnterprise, getEnterpriseDetail} from '@/apis/mch/enterprise'
import {uploadAvatar} from "@/apis";
import getAvatar from "@/utils/avatar";
import {useWindowSize} from "@vueuse/core";
let fileList = ref<FileItem[]>([])
const form = ref<EnterpriseDto>()
const renderData = ref<any[]>([])
const getEnterpriseInfo = async () => {
    const res = await getEnterpriseDetail()
    Object.assign(form, res.data)
    renderData.value = [
        {
            label: '商家名称',
            value: res.data.enterpriseName,
        },
        {
            label: '登录账号',
            value: res.data.loginName,
        },
        {
            label: '负责人',
            value: res.data.personName,
        },
        {
            label: '联系电话',
            value: res.data.mobile,
        },
        {
            label: '注册时间',
            value: res.data.createTime,
        },
        {
            label: '商家地址',
            value: res.data.detailedAddress,
        }
    ]
}
watch(() => renderData.value, () => {}, {
    immediate: true,
})
onMounted(() => {
    getEnterpriseInfo();
})
const avatar = {
    uid: '-2',
    name: 'avatar.png',
    url: userInfo.value.avatar
}
const avatarList = ref<FileItem[]>([avatar])
const fileRef = ref(reactive({ name: 'avatar.png' }))
const options: cropperOptions = reactive({
    img: '',
    autoCrop: true,
    autoCropWidth: 160,
    autoCropHeight: 160,
    fixedBox: true,
    fixed: true,
    full: false,
    centerBox: true,
    canMove: true,
    outputSize: 1,
    outputType: 'png'
})
const visible = ref(false)
// 打开裁剪框
const onBeforeUpload = (file: File): boolean => {
    fileRef.value = file
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
        options.img = reader.result
    }
    visible.value = true
    return false
}

// 重置
const reset = () => {
    fileRef.value = { name: '' }
    options.img = ''
    visible.value = false
}

const previews: any = ref({})
const previewStyle: any = ref({})
// 实时预览
const handleRealTime = (data: any) => {
    previewStyle.value = {
        width: `${data.w}px`,
        height: `${data.h}px`,
        overflow: 'hidden',
        margin: '0',
        zoom: 100 / data.h,
        borderRadius: '50%'
    }
    previews.value = data
}

const cropperRef = ref()
// 上传头像
const handleUpload = async () => {
    cropperRef.value.getCropBlob((data: any) => {
        const formData = new FormData()
        formData.append('avatarFile', data, fileRef.value?.name)
        uploadAvatar(formData).then((res) => {
            userInfo.value.avatar = res.data.avatar
            avatarList.value[0].url = getAvatar(res.data.avatar, undefined)
            reset()
            Message.success('更新成功')
        })
    })
}
</script>

<style scoped lang="less">
:deep(.arco-avatar-trigger-icon-button) {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-color: #e8f3ff;
    .arco-icon-camera {
        margin-top: 8px;
        color: rgb(var(--arcoblue-6));
        font-size: 14px;
    }
}
.arco-card {
    padding: 14px 0 4px 4px;
    border-radius: 4px;
}

:deep(.arco-avatar-trigger-icon-button) {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-color: #e8f3ff;

    .arco-icon-camera {
        margin-top: 8px;
        color: rgb(var(--arcoblue-6));
        font-size: 14px;
    }
}
</style>
